<template>
    <div class="newsBox">
        <div class="newsList">
            <div v-for="(item,index) in list" :key="index" class="newsItem">
                <image-box :src="item.cover"></image-box>
                {{ item.title }}
            </div>
        </div>
        <div class="showMore">
            <div class="showMoreText" @click="linkTo('/message')">
                - 查看更多 -
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {useRouter} from 'vue-router'
// 18038196134
import {axiosService} from '@http'

export interface homeArticleInterface {
    id: number
    title: string
    cover: string
}
const Router = useRouter()
const linkTo = (path: string) => {
    Router.push(path)
}

const list = ref<homeArticleInterface[]>([])

const getHomeArticle=()=>{
    axiosService.post<homeArticleInterface[]>('/api/Index/homeArticle',{}).then(res=>{
        list.value=res.data||[]
    })
}

getHomeArticle()


</script>

<style lang="scss" scoped>
.newsBox {
    padding-bottom: 50px;

    .showMore {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 20px;

        .showMoreText {
            font-size: 13px;
            width: 240px;
            height: 35px;
            color: #fff;
            line-height: 35px;
            border-radius: 20px;
            text-align: center;
            border: 1px solid #fff;
        }
    }

    .newsList {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        padding: 0 30px;
        color: #fff;

        .newsItem {
            /* 每个子元素占据50%的宽度减去间距 */
            width: calc(50% - 15px / 2);
            /* 每个子元素占据50%的宽度减去一半的间距 */
            box-sizing: border-box;
            // background-color: lightblue;
            text-align: center;
            // padding: 20px;
            font-size: 12px;

            img {
                width: 100%;
                height: 81px;
                object-fit: cover;
            }
        }
    }
}
</style>
